package myJs.user.workflow.featureSelection.uniAna

import com.softwaremill.quicklens._
import myJs.Implicits._
import myJs.cps._
import myJs.myPkg.jquery._
import myJs.myPkg.reactHookForm.UseFormRT
import myJs.tool.Tool
import myJs.tool.Tool._
import org.scalajs.dom.html
import shared.pojo.WorkflowMission.EachUniAnaData

import scala.collection.SeqMap
import japgolly.scalajs.react.vdom.all._
import japgolly.scalajs.react._
import japgolly.scalajs.react.React.Fragment
import japgolly.scalajs.react.util.EffectCatsEffect._
import myJs.myPkg.Hooks._
import cats.effect._
import myJs.Implicits._
import myJs.Utils._
import myJs.myPkg.MyReact

/** Created by yz on 3/11/2020
  */
object TrendCp {

  case class Props(
      data: EachUniAnaData,
      dataChange: EachUniAnaData => SyncIO[Unit],
      allGroups: List[String],
      namePrefix: String
  ){
    @inline def render: VdomElement = {
      Component(this)
    }
  }

  val Component = ScalaFnComponent[Props] { props =>
    val divRef = MyReact.createRef[html.Div]

    object FTool {

      def execTrendChange = (v: Boolean) => {
        SyncIO{} >> {
          val newData = props.data.modify(_.execTrend).setTo(v)
          props.dataChange(newData)
        }
      }

      def groupsChange = (v: List[String]) => {
        SyncIO{} >> {
          val newData = props.data.modify(_.groups).setTo(v)
          props.dataChange(newData)
        }
      }

      def trendMethodChange = (v: String) => {
        SyncIO{} >> {
          val newData = props.data.modify(_.trendMethod).setTo(v)
          props.dataChange(newData)
        }
      }

    }

    useEffect(
      SyncIO{
        Tool.popover
      }.void,
      List()
    )

    useEffect(
      {
        SyncIO{} >> {
          if (props.data.groups.nonEmpty) {
            FTool.groupsChange(List.empty)
          }else SyncIO.unit
        }
      },
      List(props.data.uniAnaGroups)
    )

    val trendMethodMap = SeqMap(
      "both" -> messages("IncreasingOrDecreasing"),
      "increase" -> messages("Increasing"),
      "decrease" -> messages("Decreasing")
    )
    val groupMap = props.allGroups.map { group =>
      (group, group)
    }.toSeqMap
    val isMul = props.allGroups.size > 2

    val displayMod = if (isMul) display.block else display.none

    div(
      displayMod,
      vRef := divRef,
      ToggleCp.Props(
        value = props.data.execTrend,
        label = messages("PerformTrendFiltering"),
        name = s"${props.namePrefix}.execTrend",
        valueChange = FTool.execTrendChange,
        show = isMul
      ).render,
      SelectCp.Props(
        value = props.data.trendMethod,
        label = messages("inOrder"),
        name = s"${props.namePrefix}.trendMethod",
        optionMap = trendMethodMap,
        onChange = FTool.trendMethodChange,
        show = props.data.execTrend
      ).render,
      RSelectMulCp.Props(
        value = props.data.groups,
        label = messages("groupsThatParticipate"),
        name = s"${props.namePrefix}.selectGroups",
        optionMap = groupMap,
        onChange = FTool.groupsChange,
        show = props.data.execTrend,
      ).render
    )

  }

}
